<!Doctype html>
<html xmlns=http://www.w3.org/1999/xhtml>

<head>
  <meta http-equiv=Content-Type content="text/html;charset=utf-8">
  <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
  <meta content=always name=referrer>
  <title>OpenLayers 3地图示例</title>
  <link href="../ol3.13.1/ol.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="../ol3.13.1/ol.js" charset="utf-8"></script>
</head>

<body>
  <div id="tiandituMap" style="width: 100%"></div>
  <script>
    // 百度地图层
    var tiandituMapLayer = new ol.layer.Tile({
      source: new ol.source.XYZ({
        tileUrlFunction: function(tileCoord) {
          var z = tileCoord[0];
          var x = tileCoord[1];
          var y = tileCoord[2];
          var halfTileNum = Math.pow(2, z - 1);
          var tiandituY = -y - halfTileNum;

          return 'http://t7.tianditu.com/DataServer?T=vec_c&x=' + x + '&y=' + tiandituY + '&l=' + z;
        }
      })
    });
    
    var tiandituMapLayer2 = new ol.layer.Tile({
      source: new ol.source.XYZ({
        tileUrlFunction: function(tileCoord) {
          var z = tileCoord[0];
          var x = tileCoord[1];
          var y = tileCoord[2];
          var halfTileNum = Math.pow(2, z - 1);
          var tiandituY = -y - halfTileNum;

          return 'http://t7.tianditu.com/DataServer?T=cva_c&x=' + x + '&y=' + tiandituY + '&l=' + z;
        }
      })
    });

    // 创建地图
    var map = new ol.Map({
      layers: [
        tiandituMapLayer, tiandituMapLayer2
      ],
      view: new ol.View({
        // 设置成都为地图中心
        center: [104.06, 30.67],
        projection: 'EPSG:4326',
        zoom: 2
      }),
      target: 'tiandituMap'
    });
  </script>
</body>

</html>